<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:30:43
 * @LastEditTime: 2021-04-18 15:46:55
 * @LastEditors: coocase
 * @Description: 注册
 * @FilePath: \git\dami\src\pages\register\register.vue
-->
<template>
  <div class="register-wrap">
    <Card class="register-card">
      <p slot="title" class="register-title">
        Hi!欢迎登录
      </p>
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" >
        <FormItem prop="user">
            <Input class="register-input" type="text" v-model="formCustom.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem  prop="passwd">
            <Input class="register-input" type="password" v-model="formCustom.passwd" placeholder="Password">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem  prop="passwdCheck">
            <Input class="register-input" type="password" v-model="formCustom.passwdCheck" placeholder="Comfirm Password">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formCustom')">Signup</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>

export default {
  name: 'register',
  data () {
    const validatePass = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('Please enter your password'));
          } else {
              if (this.formCustom.passwdCheck !== '') {
                  // 对第二个密码框单独验证
                  this.$refs.formCustom.validateField('passwdCheck');
              }
              callback();
          }
      };
      const validatePassCheck = (rule, value, callback) => {
          if (value === '') {
              callback(new Error('Please enter your password again'));
          } else if (value !== this.formCustom.passwd) {
              callback(new Error('The two input passwords do not match!'));
          } else {
              callback();
          }
      };
     
      return {
          formCustom: {
              user: '',
              password: '',
              passwdCheck:''
          },
          ruleCustom: {
              user: [
                  { required: true, message: 'Please fill in the user name', trigger: 'blur' }
              ],
              passwd: [
                  { validator: validatePass, trigger: 'blur' }
              ],
              passwdCheck: [
                  { validator: validatePassCheck, trigger: 'blur' }
              ],
          }
      }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                    this.$router.push({  name: 'logined',params:{name:this.formCustom.user}})
                } else {
                    this.$Message.error('Fail!');
                }
            })
        }
    },
    mounted(){
       
        // this.$http.getRequest({
        //   api: 'registerTest',
        //   data: {
        //     'id':'001'
        //   }
        // }).then((res) => {
        //   console.log(JSON.stringify(res.data))
        // }).catch((err) => {
          
        // });
    },
    updated: function () {
        // console.log('update')
  
    }
}
</script>

<style scoped>
.register-input{
  width: 400px;
  margin-bottom: 10px;
}
.register-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6e6e6;
}
.register-title{
  font-size: 30px;
  font:bold;
  height: 45px;
  line-height: 49px;
}
.register-card{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  margin: 100px;
  width: 600px;
  height: 500px;
}

</style>